<template>
    <div class="grade-result">
        <Card>
            <Collapse v-model="openPanel">
                <Panel name="1">
                    基本信息
                    <div class="content" slot="content">
                        <Form ref="formData" :model="formData" :label-width="150">
                            <FormItem label="评级模型" prop="elementNo">
                                <!-- <Input clearable v-model=" formData.modelType" placeholder /> -->
                                <Select v-model="formData.modelCode" @on-change="change" placeholder
                                        style="width:200px;">
                                    <Option
                                        v-for="(item,index) in dataList"
                                        :key="index"
                                        :value="item.modelCode"
                                    >{{ item.modelName }}
                                    </Option>
                                    <Page
                                        v-if="dataList.length > 0"
                                        :total="pageData.total"
                                        @on-change="changePage"
                                        style="text-align: center;"
                                        simple
                                    />
                                </Select>
<!--                                <Select v-model="formData.modelCode" @on-change="change" placeholder-->
<!--                                        style="width:200px;">-->
<!--                                    <Option-->
<!--                                        v-for="(item,index) in dataList"-->
<!--                                        v-show="index>= pageData.begin && index < pageData.end"-->
<!--                                        :key="index"-->
<!--                                        :value="item.modelCode"-->
<!--                                    >{{ item.modelName }}-->
<!--                                    </Option>-->
<!--                                    <Page-->
<!--                                        v-if="dataList.length > 0"-->
<!--                                        :total="pageData.total"-->
<!--                                        @on-change="changePage"-->
<!--                                        style="text-align: center;"-->
<!--                                        simple-->
<!--                                    />-->
<!--                                </Select>-->
                            </FormItem>
                        </Form>
                        <Form ref="resultFormData" :model="resultFormData" :label-width="150">
                            <template v-for="(item,index) in resultForm">
                                <ResultItem :form="item" :key="index" :formData="resultFormData"
                                            :resultDtlMap="resultDtlMap" :dataDict="dataDict"/>
                            </template>
                        </Form>
                    </div>
                </Panel>
                <Panel name="2">
                    评分结果
                    <div class="content" slot="content">
                        <Form ref="result" :model="result" :label-width="150" :disabled="true">
                            <Row>
                                <Col span="16">
                                    <FormItem label="模型得分">
                                        <Input clearable :value="totalScore" placeholder style="width:200px"/>
                                    </FormItem>
                                </Col>
                            </Row>
                        </Form>
                    </div>
                </Panel>
            </Collapse>
            <div class="back text-center">
                <Button type="primary" @click="submit">计算</Button>
                <!-- <Button type="primary">保存</Button> -->
            </div>
            <Spin size="large" fix v-if="spinShow"></Spin>
        </Card>
    </div>
</template>

<script>
import {getDictDataList} from "_p/afs-channel/assets/js/utils";
import {queryGradeModel, getByModelCode, calc} from "_p/afs-channel/api/grade-model"

import ResultItem from "../../components/result-item"

export default {
    // 评级页面
    name: 'GradeResult',
    components: {ResultItem},
    data() {
        return {
            spinShow: false,
            pageData: {},
            dataList: [],
            result: {},
            openPanel: [1, 2],
            formData: {}, //评级模型 选择
            dataDict: {},
            resultFormData: {}, // 模型数据form
            resultForm: [],
            queryParam:{
                pageNumber: 1,
                pageSize: 10,
                state: '1'
            },
            resultDtlMap: {}, //评分结果集
            totalScore: '', // 总分
        }
    },
    mounted() {
        this.init();
    },
    methods: {
        init() {
            let params = {
                pageNumber: 1,
                pageSize: 10,
                state: '1'
            }
            this.queryData(params)
        },
        getDictDataList(dicttArr) {
            getDictDataList(dicttArr).then(res => {
                this.spinShow = false;

                console.group("数据字典:");
                console.log(dicttArr.join("  "));
                console.log(JSON.parse(JSON.stringify(res)));
                console.groupEnd();
                this.dataDict = res;
            }).catch(e => {
                this.spinShow = false;
                console.error(e)
            });
        },
        queryData(queryData) {
            if (!queryData) return;
            this.spinShow = true;
            queryGradeModel(queryData).then((res) => {
                this.spinShow = false;
                if (res.code === "0000" && res.data) {
                    let {records, total} = res.data;
                    if (records && records.length > 0) {
                        this.pageData = {
                            total: total,
                        }
                        this.dataList = records
                    }
                }
            }).catch(e => {
                this.spinShow = false;
                console.error(e)
            })
        },
        // changePage(val) {
        //     let begin = (val - 1) * 10,
        //         end = val * 10;
        //     this.pageData = Object.assign({}, this.pageData, {begin, end})
        // },
        changePage(val) {
            console.log(val,'changePage')
            this.queryParam.pageNumber = val;
            this.queryData(this.queryParam)
        },
        change(val) {
            this.spinShow = true;
            getByModelCode(val).then(res => {
                this.spinShow = false;
                if (res.code === "0000") {
                    this.sortData(res.data);
                }
            }).catch(e => {
                this.spinShow = false;
                console.error(e)
            })
        },
        sortData(data) {
            if (Array.isArray(data) && data.length <= 0) return;
            // 一二级分类 特别注意 数据返回格式
            let firstLevel = this.getLevelData(data, '1'),
                secondLevel = this.getLevelData(data, '2'),
                resultForm = [],
                // // 渠道评级一级指标(channelGradeLevel1Element)
                dicttArr = ["channelGradeLevel1Element",],
                resultFormData = {};

            console.log('firstLevel', firstLevel);
            // console.log('secondLevel', secondLevel);
            firstLevel.forEach(ele => {
                const {attributes, id, state, text} = ele;
                let item = {id, state, text, children: [], _showChildren: true}
                resultForm.push(Object.assign({}, item, attributes))
            });
            secondLevel.forEach(ele => {
                const {attributes, id, state, text, pid} = ele;
                let item = {id, state, text, pid},
                    index = resultForm.findIndex(e => e.elementNo === attributes.upElementNo);
                //
                if (attributes.elementEditType === "0") {
                    dicttArr.push(attributes.elementEditSrc)
                }
                // resultFormData[attributes.elementNo] = attributes.elementValue
                resultFormData[attributes.elementNo] = "1"

                if (index >= 0)
                    resultForm[index].children.push(Object.assign({}, item, attributes))
            })
            console.log(resultForm, 'resultForm')
            console.log(resultFormData, 'resultFormData')
            this.resultFormData = resultFormData

            this.resultForm = resultForm;
            dicttArr.push('channelGradeElement') // elementName
            this.getDictDataList(dicttArr);
        },
        getLevelData(data, level) {
            if (!data || !level) return;
            return data.filter(e => e.attributes && e.attributes.elementType === level).sort((a, b) => a.attributes.seqno - b.attributes.seqno)
        },
        submit() {
            console.log(this.resultFormData);
            this.$refs.resultFormData.validate(valid => {
                console.log(valid, 'valid');
                if (valid) {
                    this.submitQuery()
                }
            })
        },
        submitQuery() {
            this.spinShow = true;
            let gradeInfoMap = []
                , modelCode = this.formData.modelCode;
            for (let i in this.resultFormData) {
                gradeInfoMap.push({[i]: this.resultFormData[i]})
            }
            console.log(this.resultFormData, gradeInfoMap);

            calc({modelCode, gradeInfoMap}).then(res => {
                this.spinShow = false;
                if (res.code === "0000" && res.data) {
                    const {gradeModelResultDtlMap, resultId, score} = res.data;
                    this.resultDtlMap = gradeModelResultDtlMap;
                    this.totalScore = score;
                }
            }).catch(e => {
                this.spinShow = false;
                console.error(e);
            })
        }
    }
}
</script>

<style lang="less">
@import "../../../../assets/css/channelBase.css";

.back {
    padding-top: 16px;
}

.text-center {
    text-align: center;

    button:not(:last-child) {
        margin-right: 16px;
    }
}
.grade-result .ivu-select-dropdown {
    max-height: 320px;
}
</style>
